<!DOCTYPE html>
<html lang="en" style="background-color: #ffffff;">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ECharts">
    <meta name="author" content="linzhifeng@baidu.com">
    <title>ECharts · Example</title>

    <link rel="shortcut icon" href="../asset/ico/favicon.png">

    <!--<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">-->
    <!--<link href="../asset/css/bootstrap.css" rel="stylesheet">-->
    <!--<link href="../asset/css/carousel.css" rel="stylesheet">-->
    <link href="wjjs/echartsHome.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="wjjs/esl.js"></script>
    <script src="wjjs/codemirror.js"></script>
    <!--<script src="../asset/js/javascript.js"></script>-->

    <link href="wjjs/codemirror.css" rel="stylesheet">
    <link href="wjjs/monokai.css" rel="stylesheet">
</head>

<body>
<!-- Fixed navbar -->


<div class="container-fluid"  style="display:none">


    <textarea id="code" name="code" style="display:none">
        option = {
        tooltip : {
        formatter: "{a} <br/>{c} {b}"
        },
        toolbox: {
        show : true,
        feature : {
        mark : {show: true},
        restore : {show: true},
        saveAsImage : {show: true}
        }
        },
        series : [
        {
        name:'当前',
        type:'gauge',
        min:0,
        max:220,
        splitNumber:11,
        axisLine: {            // 坐标轴线
        lineStyle: {       // 属性lineStyle控制线条样式
        width: 10
        }
        },
        axisTick: {            // 坐标轴小标记
        length :15,        // 属性length控制线长
        lineStyle: {       // 属性lineStyle控制线条样式
        color: 'auto'
        }
        },
        splitLine: {           // 分隔线
        length :20,         // 属性length控制线长
        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
        color: 'auto'
        }
        },
        title : {
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        fontWeight: 'bolder',
        fontSize: 20,
        fontStyle: 'italic'
        }
        },
        detail : {
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        fontWeight: 'bolder'
        }
        },
        data:[{value: 40, name: '当前负载'}]
        },
        {
        name:'5分钟',
        type:'gauge',
        center : ['25%', '55%'],    // 默认全局居中
        radius : '50%',
        min:0,
        max:8,

        minSize:"0%",
        maxSize:"100%",
        splitNumber:8,
        axisLine: {            // 坐标轴线
        lineStyle: {       // 属性lineStyle控制线条样式
        width: 8
        }
        },
        axisTick: {            // 坐标轴小标记
        length :12,        // 属性length控制线长
        lineStyle: {       // 属性lineStyle控制线条样式
        color: 'auto'
        }
        },
        splitLine: {           // 分隔线
        length :20,         // 属性length控制线长
        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
        color: 'auto'
        }
        },
        pointer: {
        width:5
        },
        title : {
        offsetCenter: [0, '-30%'],       // x, y，单位px
        },
        detail : {
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        fontWeight: 'bolder'
        }
        },
        data:[{value: 1.5, name: '5分钟/负载'}]
        },
        {
        name:'15分钟',
        type:'gauge',
        center : ['75%', '55%'],    // 默认全局居中
        radius : '50%',
        min:0,
        max:8,

        splitNumber:8,
        axisLine: {            // 坐标轴线
        lineStyle: {       // 属性lineStyle控制线条样式
        width: 8

        }
        },
        axisTick: {            // 坐标轴小标记
        length :12,        // 属性length控制线长
        lineStyle: {       // 属性lineStyle控制线条样式
        color: 'auto'
        }
        },
        splitLine: {           // 分隔线
        length :20,         // 属性length控制线长
        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
        color: 'auto'
        }
        },
        pointer: {
        width:5
        },
        title : {
        offsetCenter: [0, '-30%'],       // x, y，单位px
        },
        detail : {
        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
        fontWeight: 'bolder'
        }
        },
        data:[{value: 1.5, name: '15分钟/负载'}]
        },
        ]};
        var i=0;
        clearInterval(timeTicket);
        timeTicket = setInterval(function (){
        $.ajax({
        url:"http://192.168.1.48:8080/info/load",
        dataType:'json',
        data:'',
        success:function(result) {
        option.series[1].data[0].value = result.bf5;
        option.series[0].data[0].value = result.now;
        option.series[2].data[0].value = result.bf15;
        console.log(result)
        },
        timeout:3000
        });
        myChart.setOption(option,true);
        },500)
    </textarea>
</div>
<div id="graphic" class="col-md-8" style=" width: 100%">
    <div id="main" class="main"></div>

</div><!--/span-->


<!--/.fluid-container-->


<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="wjjs/jquery.min.js"></script>
<!-- <script type="text/javascript" src="../asset/js/echartsHome.js"></script>-->
<!-- <script src="../asset/js/bootstrap.min.js"></script>-->
<script type="text/javascript">var timeTicket;</script>
<script src="wjjs/echartsExample.js"></script>
</body>
</html>
